<template>
  <div class="content-center">
    <!-- 页面标签/页面tab -->
    <div class="content-cotainer border-box">
      <!-- 面包屑 -->
      <div class="content-breadcrumb">
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/' }">系统管理</el-breadcrumb-item>
          <el-breadcrumb-item>操作日志</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 页面内容-->
      <div class="audit-content">
        <div class="centent-title">
          <span>操作日志</span>
        </div>
        <!-- 页面内容 -->
        <div class="centent-inner">
          <!-- 顶部筛选条件 -->
          <div class="inner-search-box">
            <div class="inner-item">
              <span class="inner-item-title">用户标识:</span>
              <el-input v-model="userValue" placeholder="请输入用户标识"></el-input>
            </div>
            <div class="inner-item">
              <span class="inner-item-title">功能标识:</span>
              <el-input v-model="funcValue" placeholder="请输入功能标识"></el-input>
            </div>
            <div class="inner-item">
              <span class="inner-item-title">日志分类:</span>
              <el-select v-model="logValue" placeholder="请选择日志分类">
                <el-option
                  v-for="item in logOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div class="inner-item">
              <span class="inner-item-title">操作时间:</span>
              <el-date-picker v-model="timeValue" type="date" placeholder="选择操作时间"></el-date-picker>
            </div>
            <button class="btn btn-primary" @click="searchHandle">
              <i class="iconfont icon-search"></i>
              <span>查询</span>
            </button>
            <button class="btn btn-primary" @click="resetHandle">
              <i class="iconfont icon-reset"></i>
              <span>重置</span>
            </button>
            <button class="btn btn-primary" @click="exportHandle">
              <i class="iconfont icon-export"></i>
              <span>导出</span>
            </button>
            <button class="btn btn-primary">
              <span>查看</span>
            </button>
          </div>
          <!-- 表格 -->
          <div class="inner-table">
            <el-table
              ref="multipleTable"
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column type="index" label="序号" width="50">
                <template slot-scope="scope">
                  <span
                    style="color:#6C8AB6;text-decoration:underline"
                    @click="goInfo(scope.row)"
                  >{{scope.$index+1}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="userId" label="用户标识"></el-table-column>
              <el-table-column prop="menuPath" label="菜单路径" width="200"></el-table-column>
              <el-table-column prop="funcId" label="功能标识" show-overflow-tooltip></el-table-column>
              <el-table-column prop="logType" label="日志类型" show-overflow-tooltip></el-table-column>
              <el-table-column prop="ipAddress" label="终端IP地址" show-overflow-tooltip></el-table-column>
              <el-table-column prop="time" label="操作时间" show-overflow-tooltip></el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="inner-pagination">
            <el-pagination background layout="prev, pager, next" :total="dataLength"></el-pagination>
            <span class="pageInfo">当前第{{1}}页/每页10条，共{{dataLength}}条</span>
          </div>

          <!-- 对话框 -->
          <el-dialog title="日志详情" :visible.sync="dialogVisible" center>
            <div class="dialog-inner">
              <div class="inner-item">
                <h5 class="log-name">用户标识:</h5>
                <h5 class="log-info">{{nwoTableData.userId}}</h5>
              </div>
              <div class="inner-item">
                <h5 class="log-name">菜单路径:</h5>
                <h5 class="log-info">{{nwoTableData.menuPath}}</h5>
              </div>
              <div class="inner-item">
                <h5 class="log-name">功能标识:</h5>
                <h5 class="log-info">{{nwoTableData.funcId}}</h5>
              </div>
              <div class="inner-item">
                <h5 class="log-name">日志分类:</h5>
                <h5 class="log-info">{{nwoTableData.logType}}</h5>
              </div>
              <div class="inner-item">
                <h5 class="log-name">终端IP地址:</h5>
                <h5 class="log-info">{{nwoTableData.ipAddress}}</h5>
              </div>
              <div class="inner-item">
                <h5 class="log-name">操作时间:</h5>
                <h5 class="log-info">{{nwoTableData.time}}</h5>
              </div>
              <div class="inner-item">
                <h5 class="log-name">操作描述:</h5>
                <h5 class="log-info">{{nwoTableData.info}}</h5>
              </div>
              <button class="btn btn-primary done-btn" @click="dialogVisible = false">
                <span>完成</span>
              </button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userValue: "", //用户标识
      funcValue: "", //功能标识
      logValue: "", //日志分类
      timeValue: "", //操作时间
      // 时间控件
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      //  日志选择
      logOptions: [
        {
          value: "选项1",
          label: "操作日志"
        },
        {
          value: "选项2",
          label: "查看日志"
        },
        {
          value: "选项3",
          label: "修改日志"
        }
      ],
      value: "",
      tableData: [
        {
          userId: "AO0001",
          menuPath: "系统管理/数据字典管理",
          funcId: "新增",
          logType: "操作日志",
          ipAddress: "127.0.0.1",
          time: "2018/9/8",
          info:
            "用户AO002在2019年6月7日上午11:00新增系统管理/数据字典管理/数据字典类型"
        },
        {
          userId: "AO0002",
          menuPath: "系统管理/数据字典管理",
          funcId: "修改",
          logType: "操作日志",
          ipAddress: "127.0.0.2",
          time: "2018/9/18",
          info:
            "用户AO002在2019年6月7日上午11:00新增系统管理/数据字典管理/数据字典类型"
        },
        {
          userId: "AO0003",
          menuPath: "系统管理/数据字典管理",
          funcId: "删除",
          logType: "操作日志",
          ipAddress: "127.0.0.3",
          time: "2018/9/28",
          info:
            "用户AO002在2019年6月7日上午11:00新增系统管理/数据字典管理/数据字典类型"
        }
      ],
      timeValue: "", //时间选择
      input: "", //input框
      dialogVisible: false, //对话框展示状态
      nwoTableData: {},
      multipleSelection: [] //当前被选中内容
    };
  },
  computed: {
    dataLength() {
      return this.tableData.length;
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    searchHandle() {
      console.log("查询数据");
    },
    resetHandle() {
      this.userValue = "";
      this.funcValue = "";
      this.logValue = "";
      this.timeValue = "";
    },
    exportHandle() {
      console.log(this.multipleSelection);
      console.log("导出");
    },
    // 查看详情
    goInfo(row) {
      this.dialogVisible = true;
      this.nwoTableData = row;
      console.log(this.nwoTableData);
    }
  }
};
</script>

<style lang="less" scoped>
.content-cotainer {
  padding: 0 20px 20px 20px;
  height: 100%;
  .centent-inner {
    padding: 0 20px 20px 20px;
  }
  // 搜索模块
  .inner-search-box {
    width: 100%;
    height: 84px;
    margin: 20px 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    .inner-item {
      height: 32px;
      margin: 0 50px 20px 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .inner-item-title {
        display: inline-block;
        margin-right: 10px;
        font: 14px/32px "PingFangSC-Regular";
        color: #333333;
      }
      /deep/.el-input {
        width: 216px;
      }
      /deep/.el-input__inner {
        width: 216px;
        height: 32px;
      }
      /deep/.el-input__icon {
        line-height: 32px;
      }
      /deep/.el-select-dropdown__item {
        font: 14px/20px "PingFangSC-Regular";
      }
    }
    .btn {
      margin-right: 20px;
    }
  }
  // 对话框
  .dialog-inner {
    /deep/.el-dialog--center .el-dialog__body {
      padding-top: 0;
    }
    .inner-item {
      font: 14px/34px "PingFangSC-Regular";
      margin-bottom: 10px;
      display: flex;
      justify-content: flex-start;
    }
    .log-name {
      color: #999;
      margin-right: 10px;
    }
    .log-info {
      color: #333;
    }
    .done-btn {
      width: 100%;
      height: 52px;
      margin-top: 20px;
    }
    /deep/.el-dialog--center .el-dialog__body {
      padding: 0 50px 40px;
    }
  }
  //   复选框
  /deep/.el-checkbox__label {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;
    padding-left: 5px;
  }

  /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #6c8ab6;
    border-color: #6c8ab6;
  }

  /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
    color: #333;
  }

  /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #6c8ab6;
    border-color: #6c8ab6;
  }
  //   对话框
  /deep/.el-dialog {
    width: 40%;
  }
}
</style>